import React, {Key} from "react";
import {notification, Space} from "antd";
import HButton from "@/components/ant-ext/HButton";
import {ReloadOutlined} from "@ant-design/icons";
import {HDataTableDispatch} from "@/components/ant-ext-table/redux/HAdminContext";
import {HDataTableSlice} from "@/components/ant-ext-table/redux/dataTableSlice";
import {AnyParams, SetLoadingType} from "@/common/httptypes";
import HAction, {HActionProps} from "@/components/common/HAction";


export type HTableOptionProps<RecordType> = {
    selectData: () => void
    loading: boolean
    rowKey: string
    selectRowKeys: Key[],
    dataSource: RecordType[],
    dispatch: HDataTableDispatch,
    option?: HTableOptionParams<RecordType>[]
}
export type HTableOptionParams<RecordType> = {
    key: string
    title: string
    mode?: "null" | "multi" | "only"
    confirm?: string
    icon?: React.ReactNode
    action?: (data: { selectRowKeys: Key[], dataSource: RecordType[], setLoading: SetLoadingType }) => void
}
const {doAction} = HDataTableSlice.actions
export default class HTableOption<RecordType> extends React.Component<HTableOptionProps<RecordType>, any> {

    state: { nodes?: React.ReactNode[] } = {}

    constructor(props: HTableOptionProps<RecordType>) {
        super(props);
        this.switchMode = this.switchMode.bind(this)
        this.toNode = this.toNode.bind(this)
        this.state.nodes = this.toNode()

    }

    componentDidUpdate(prevProps: Readonly<HTableOptionProps<RecordType>>, prevState: Readonly<any>, snapshot?: any) {
        if (this.props.selectRowKeys !== prevProps.selectRowKeys || this.props.rowKey !== prevProps.rowKey || this.props.dataSource !== prevProps.dataSource || this.props.option !== prevProps.option) {
            this.setState({nodes: this.toNode()})
        }
    }

    switchMode(mode: string, action: HActionProps["action"]) {
        switch (mode) {
            case "multi":
                return (setLoading: SetLoadingType) => {
                    const selectRowKeys = this.props.selectRowKeys
                    if (selectRowKeys.length === 0) {
                        notification.warning({message: "请选择一行或多行数据"})
                        return false
                    }
                    action?.(setLoading)
                }
            case "only":
                return (setLoading: SetLoadingType) => {
                    const selectRowKeys = this.props.selectRowKeys
                    if (selectRowKeys.length === 0) {
                        notification.warning({message: "必须选择一行数据"})
                        return false
                    } else if (selectRowKeys.length !== 1) {
                        notification.warning({message: "只能选择一行数据"})
                        return false
                    } else {
                        action?.(setLoading)
                    }
                }
            case "null":
            default:
                return action
        }

    }

    toNode() {
        return this.props.option?.map((p, i) => {
            const {mode = "null"} = p
            let params: AnyParams<any> = {icon: p.icon, title: p.title, empower: p.key}
            if (!p.icon) {
                params["children"] = p.title
            }
            if (p.action) {
                params["action"] = this.switchMode(mode, (setLoading: SetLoadingType) => {
                    p.action!({selectRowKeys: this.props.selectRowKeys, dataSource: this.props.dataSource, setLoading})
                })
            } else {
                params["action"] = this.switchMode(mode, () => {
                    console.log(p)
                    this.props.dispatch(doAction({action: p.key, rowKey: this.props.rowKey}))
                })
            }
            return <HAction  {...params} key={p.key} type={"link"} confirm={p.confirm}/>
        })

    }

    render() {
        const {selectData, loading} = this.props

        return <Space wrap className="tableOption" align={"end"}>
            <HButton type={"link"} icon={<ReloadOutlined/>} title={"刷新"} loading={loading}
                     onClick={selectData}/>
            {
                this.state.nodes
            }

        </Space>;
    }
}